<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
	body{
		font-size:9pt;
		font-family:"굴림";		
	}
	div, p{
		border:1px #eeeeee solid;
		margin:10px;
	}
	
	
</style>

<script type="text/javascript"  src="../libs/jquery-1.7.1.min.js"> </script>
<script>
	/*
	window.onload=function()
	{
		var page = document.getElementById("sample_page");
		
		// 첫번째 영역에 추가
		//1-1. 기준이 되는 위치찾기
		var firstChild = page.firstChild;
		//1-2.<p> Element를 동적으로 생성
		var p1 = document.createElement("p");		
		//1-3. textNode 생성
		var text1 = document.createTextNode("추가 내용1");
		//1-4. p1의 자식노드로 text1을 추가
		p1.appendChild(text1);		
		p1.style.border	="4px solid #ff0000";
		//1-5. p1을 #test2의 위쪽에 추가
		page.insertBefore(p1, firstChild);		
		 
		
		// 두번째 영역에 추가
		// 2-1. 기준이 되는 위치찾기
		var content = document.getElementById("content");
		// 2-2. <div> Element를 동적으로 생성
		var div1 = document.createElement("div");
		// 2-3. div의 내부 자식노드를  동적으로생성
		var text2_1	= document.createTextNode("생성할 Node의 양이 많은 경우,");
		var span = document.createElement("span");
		var spanText =  document.createTextNode("어떤 방법을 ");	
		span.appendChild(spanText);			
		var text2_2	= document.createTextNode("사용해야 할까요?");
		
		// 2-4. div의 자식노드로 콘텐츠 추가
		div1.appendChild(text2_1);
		div1.appendChild(span);
		div1.appendChild(text2_2);		
		div1.style.border ="4px solid #ff0000";
		
		//2-5.생성된 div1을 #content의 위쪽에 추가
		page.insertBefore(div1,content);

				
		// 세번째 영역에 추가
		//3-1. <p> Element를 동적으로 생성
		var p2  = document.createElement("p");
		//3-2. textNode 생성
		var text2 = document.createTextNode("추가 내용2");
		//3-3. p2의 자식노드로 text2를  추가		
		p2.appendChild(text2);
		p2.style.border	="4px solid #ff0000";
		//3-4. p2을 page마지막 위치에 추가
		page.appendChild(p2);	
	}
	*/
	$(document).ready(function(){
		
		var $page = $("#sample_page");	
		// 첫번째 영역에 추가
		var $firstNode	= $page.contents().first();
		var $p1 = $("<p>추가내용1</p>");
		$p1.css("border", "4px solid #ff0000");
		$p1.insertBefore($firstNode);
		//또는
		//$firstNode.before($p1);
		  		
		// 두번째 영역에 추가	
		var $content = $("#content");
		var $div1 = $("<div>생성할 Node가 많은 경우,<span>어떤 방법을?</span> 사용해야 할까요?</div>");
		$div1.css("border", "4px solid #ff0000");
		$div1.insertBefore($content);
		
		// 세번째 영역에 추가
		var $p2	= $("<p>추가내용3</p>");
		$p2.css("border", "4px solid #ff0000");
		$page.append($p2);		
		//또는 
		//$div2.appendTo($page);
	});
</script>
</head>
<body>
	<div id="sample_page" class="page" >
		샘플 페이지(div, id=sample_page, class=page)
		<div id="header">				
			헤더 영역(div, id=header)
		</div>
		<div id="content" class="sample_content">
			컨텐츠 영역(div, id=content, class=sample_content)
			<div> 
				JavaScript란?(div)
				<p id="data_1">1. 자바스크립트 Core(p, id=data_1)</p>
				<p id="data_2">2. 자바스크립트  BOM(p, id=data_2)</p>
				<p id="data_3">3. 자바스크립트 DOM(p, id=data_3)</p>
				을 배운다는것
			</div>
			<div class="content_data">
				자바스크립트에서 배울 내용(div, class=content_data)
				<p>1. 자바스크립트 DOM(p)</p>
				<p>2. 자바스크립트 Ajax(p)</p>
			</div>				
			<div class="content_data">
				jQuery에서 배울 내용(div, class=content_data)
				<p>1. jQuery DOM(p)</p>
				<p>2. jQuery Ajax(p)</p>
			</div>				
		</div>
		<div id="footer">				
			푸터 영역(div, id=footer)
		</div>		
	</div>	
</body>

</html>
